<template>
    <view class="signBox">
        <view class="topHint">请在下方空白书写区域内写出您的名字</view>
        
        <canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature"
            @touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
		<view class="btn">
			<button size="default" type="default" @click="save">确认</button>
			<button size="default" type="default" @click="clear">清除</button>
		</view>
    </view>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                dom: null,
                line: [],
                radius: 0,
                width: '600rpx',
                height: '300rpx',
            }
        },
        onLoad() {},
        computed: {},
        created() {
            this.dom = uni.createCanvasContext('designature', this);

        },
        onShow() {},
        methods: {
            end(e) {},
            distance(a, b) {
                let x = b.x - a.x;
                let y = b.y - a.y;
                return Math.sqrt(x * x + y * y);
            },
            // 开始
            starts(e) {
                this.line.push({
                    points: [{
                        time: new Date().getTime(),
                        x: e.touches[0].x,
                        y: e.touches[0].y,
                        dis: 0
                    }]
                })
                let currentPoint = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                this.currentPoint = currentPoint
                this.drawer(this.line[this.line.length - 1])
            },
            // 滑动
            moves(e) {
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                this.lastPoint = this.currentPoint,
                    this.currentPoint = point
                this.line[this.line.length - 1].points.push({
                    time: new Date().getTime(),
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                    dis: this.distance(this.currentPoint, this.lastPoint)
                })
                this.drawer(this.line[this.line.length - 1])
            },
            // 书写
            drawer(item) {
                let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
                    x, y;
                var time = 0;
                if (item.points.length > 2) {
                    let lines = item.points[item.points.length - 3];
                    let line = item.points[item.points.length - 2];
                    let end = item.points[item.points.length - 1];
                    x = line.x;
                    y = line.y;
                    x1 = lines.x;
                    y1 = lines.y;
                    x2 = end.x;
                    y2 = end.y;
                    var dis = 0;
                    time = (line.time - lines.time) + (end.time - line.time)
                    dis = line.dis + lines.dis + end.dis;
                    var dom = this.dom;
                    var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
                    cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
                    cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
                    dom.setLineCap('round')
                    dom.beginPath();
                    dom.setStrokeStyle('black')
                    dom.setLineWidth(5)
                    dom.moveTo(x1, y1);
                    dom.quadraticCurveTo(cx, cy, x2, y2);
                    dom.stroke();
                    dom.draw(true)
                }
            },
            // 清除
            clear() {
                this.dom.clearRect(0, 0, 1000, 1000)
                this.dom.draw()
            },
            // 保存图片
            save() {
                var t = this;
                uni.canvasToTempFilePath({
                    canvasId: 'designature',
                    fileType: 'png',
                    quality: 1, //图片质量
                    success: function(res) {
                        t.$emit('getImg', res.tempFilePath)
                    },
                    fail(e) {
                        console.log(e)
                    }
                }, this)
            }
        }
    }
</script>

<style scoped>
    
</style>
